<template>
  <span class="lg-input" :class="{ focused }">
    <t-input v-model="val" class="inner-input" @focus="focus" @blur="blur" />
    <span class="inner-text">{{ props.modelValue }}</span>
  </span>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';

const props = defineProps({
  modelValue: [String, Number],
});
const emits = defineEmits(['update:modelValue', 'change']);

const focused = ref(false);
const val = ref();

watch(
  () => props.modelValue,
  (v) => (val.value = v),
  { immediate: true },
);

function focus() {
  focused.value = true;
}

function blur() {
  if (val.value !== props.modelValue) {
    emits('change', val.value);
    emits('update:modelValue', val.value);
    val.value = props.modelValue;
  }
  focused.value = false;
}
</script>

<style lang="less" scoped>
.lg-input {
  .inner-input {
    display: none;
  }
  &:hover,
  &.focused {
    .inner-input {
      display: unset;
    }
    .inner-text {
      display: none;
    }
  }
}
</style>
